// @font-face {
//   font-family: 'PingFangSC-Semibold';
//   src: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/fonts/PingFangSC-Semibold.ttf'); //你的资源目录
//   font-weight: normal;
//   font-style: normal;
// }

html,
body {
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@function pxTorem($px) {
  //$px为需要转换的字号（页面缩小0.6）
  @return $px / 10 * 0.6 * 1rem;
}

$primary: #175bfb;

.btn.primary {
  background: $primary;
  color: #fff;
  border-radius: pxTorem(4);
  border: 1px solid $primary;
  font-size: pxTorem(18);
  width: pxTorem(120);
  height: pxTorem(40);
  padding: 0;
  line-height: pxTorem(40);
  text-align: center;
}
.btn.white {
  background: #fff;
  color: $primary;
  border-radius: pxTorem(4);
  border: 1px solid $primary;
  font-size: pxTorem(18);
  width: pxTorem(120);
  height: pxTorem(40);
  padding: 0;
  line-height: pxTorem(40);
  text-align: center;
}

.btn.primary:hover {
  background: #fff;
  color: $primary;
}
.btn.white:hover {
  background: $primary;
  color: #fff;
}

.primary-color {
  color: $primary;
}

$header-height: pxTorem(72);

li {
  list-style: none;
}

body {
  padding-top: $header-height;
}

[v-cloak] {
  display: none;
}
/*header*/
#app-header {
  .navbar {
    width: 100%;
    height: $header-height;
    line-height: $header-height;
    background-color: #fff;
    box-shadow: 0px 4px 16px 0px rgba(23, 64, 197, 0.13);
    margin: 0;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    .content {
      width: pxTorem(1200);
      margin: 0 auto;
      .navbar-brand {
        width: pxTorem(160);
        padding: 0;
        line-height: $header-height;
        height: $header-height;
        font-size: pxTorem(18);
        color: #000;
        font-weight: 500;
      }
      .nav {
        a {
          padding: 0 pxTorem(10);
          line-height: $header-height;
          height: $header-height;
          color: #000;
          font-size: pxTorem(18);
          font-weight: 500;
        }
        .active {
          a {
            background: none;
            color: $primary;
          }
          a::before {
            display: inline-block;
          }
        }

        .trail {
          margin-left: pxTorem(30);
          line-height: 0.72rem;
          a::before {
            display: none !important;
          }
          a:hover {
            color: $primary;
            background: #fff;
          }
          .btn {
            display: inline-block;
            background: $primary;
            color: #fff;
            font-weight: 500;
            border-radius: pxTorem(4);
            border: 1px solid $primary;
            font-size: pxTorem(18);
            width: pxTorem(89);
            height: pxTorem(40);
            padding: 0;
            line-height: pxTorem(40);
            text-align: center;
          }
        }
      }
      .ml48 {
        margin-left: pxTorem(48);
      }

      .dropdown .caret-png {
        width: pxTorem(18);
        height: pxTorem(17);
        display: inline-block;
        background: url('/images/comm/dropdown.png') no-repeat center center;
        background-size: 100% 100%;
        margin-left: pxTorem(10);
        vertical-align: middle;
      }
      .nav > li:hover > a::before {
        display: inline-block;
      }
      .nav > li > a {
        position: relative;
      }
      .nav > li > a:hover {
        background: none;
        color: $primary;
      }
      .nav > li > a::before {
        content: '';
        position: absolute;
        width: pxTorem(22);
        height: pxTorem(4);
        border-radius: pxTorem(2);
        left: 50%;
        margin-left: pxTorem(-11);
        bottom: pxTorem(10);
        background: $primary;
        display: none;
      }
      .nav > li.dropdown > a::before {
        margin-left: pxTorem(-21);
      }
      .dropdown.active,
      .active {
        a {
          background: none;
          color: $primary;
        }
        a::before {
          display: inline-block;
        }
      }
      .dropdown-menu {
        padding: 0;
        box-shadow: 0px 12px 21px 0px rgba(23, 64, 197, 0.2);
        border: 0 none;
        min-width: pxTorem(120);
        a {
          padding: pxTorem(21) pxTorem(16);
          font-size: pxTorem(18);
          height: pxTorem(60);
          line-height: pxTorem(60-42);
          box-sizing: border-box;
        }
        a:hover,
        .active > a {
          background: rgba(29, 92, 251, 1);
          color: #fff;
        }
      }
    }
  }
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
  background-color: #fff;
}

/*footer*/
.app-footer {
  height: pxTorem(360);
  width: 100%;
  padding-top: pxTorem(220);
  background-color: #fff;
  color: #333;
  .content {
    width: pxTorem(1304);
    margin: 0 auto;
    position: relative;
    padding-bottom: pxTorem(74);
    .left-content {
      width: pxTorem(340);
      float: left;
    }
    .right-content {
      width: pxTorem(1304-346);
      float: right;
      .right-content-top {
        width: 100%;
        height: 100%;
        position: relative;
        .divid {
          position: absolute;
          left: 0;
          top: pxTorem(74);
          height: pxTorem(2);
          width: 100%;
          background-color: #ccd1e1;
          border-radius: pxTorem(2);
        }

        .mr114 {
          margin-right: pxTorem(114);
        }
      }
    }
    .item {
      float: left;
      dt {
        font-size: pxTorem(30);
        line-height: pxTorem(74);
        color: #000;
        padding-bottom: pxTorem(16);
        font-weight: 600;
      }
      dd {
        font-size: pxTorem(18);
        line-height: pxTorem(36);
        font-weight: 400;
        a {
          color: #333;
          &:hover {
            color: $primary;
          }
        }
      }
    }
    .copyright {
      line-height: pxTorem(74);
      height: pxTorem(74);
      font-size: pxTorem(20);
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 5;
    }
  }
}
